<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付</title>
    <link rel="shortcut icon" href="../img/g10.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pay.css">
    <link rel="stylesheet" href="../css/templet.css">
    <link rel="stylesheet" href="../utill/font-awesome.css">
    <script src='../utill/jquery-3.5.1.min.js'></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <img class="logo" src="../img/img-templet/logo.png " alt="">
            <div class="position"><a href="">北京<img src="../img/img-templet/logo-bottom.png" alt=""></a></div>
            <ul class="type">
                <li><a href="">北京站</a></li>
                <li><a href="">演唱会</a></li>
                <li><a href="">音乐会</a></li>
                <li><a href="">话剧歌剧</a></li>
                <li><a href="">体育</a></li>
            </ul>
            <input type="text" placeholder="请输入演出、赛事、艺人、场馆名称...">
            <button><img src="../img/img-templet/search.png" alt=""></button>
            <ul class="login">
                <li><a href="login.html">登录</a></li>
                <li><a href="resigter.html">注册</a></li>
            </ul>
        </div>
    </div>

    <!-- 中间内容 -->
    <main>
        <!-- 面包屑 -->
        <div class="card-body">
            <ul class="nav-step step-dots">
                <li class="nav-step-item active">
                    <span>选择商品</span>
                    <a class="active" data-toggle="tab" href="#step-1"><i class=" fa fa-check"></i>
                        <span class="line "></span></a>

                </li>

                <li class="nav-step-item">
                    <span>确认订单信息</span>
                    <a data-toggle="tab" href="#step-2"><i class=" fa fa-check"></i>
                        <span class="line"></span></a>

                </li>

                <li class="nav-step-item">
                    <span>支付订单</span>
                    <a data-toggle="tab" href="#step-3">
                        <i class=" fa fa-check"></i>
                        <span class="line"></span>
                    </a>
                </li>

                <li class="nav-step-item">
                    <span>收取商品</span>
                    <a data-toggle="tab" href="#step-4"><i class=" fa fa-check"></i></a>

                </li>
            </ul>
        </div>
        <!-- 快递 -->
        <div id='express'>
            <p>配送方式</p>
            <div id='img'>
                <i></i>
            </div>
            <p class='kuaidi'>快递</p>
        </div>
        <!-- 地址 -->
        <div id='address'>
            <div class="btn" data-toggle="modal" data-target="#myModal">
                使用新地址
            </div>


        </div>
        <!-- 支付方式 -->
        <div id='pay-method'>
            <p>支付方式</p>
            <div class='box1'>支付宝支付</div>
            <div class='box2'>微信支付</div>
            <div class='box3'>银联支付</div>
            <div class='box4'>货到付款</div>
        </div>
        <!-- 订单信息 -->
        <div id="goods">
            <!-- 遍历内容 -->
            <h3>确认订单信息</h3>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>项目信息</th>
                        <th>座位信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>优惠</th>
                        <th>小计</th>
                    </tr>
                </thead>

            </table>
            <!-- 购买按钮 -->
            <button id="btn">确认购买</button>
        </div>
    </main>



    <!-- 尾部 -->
    <footer>
        <div class="top">
            <div class="itm">
                <strong>订购方式 </strong>
                <p>在线订购</p>
                <p>电话订购</p>
                <p>上门订购</p>
                <p>大客户团体订购</p>
                <p>大麦超级票订购</p>
            </div>
            <div class="itm">
                <strong>配送方式</strong>
                <p>送货上门</p>
                <p>电子票</p>
                <p>上门自取</p>
                <p>大麦自助机换票</p>
            </div>
            <div class="itm">
                <strong>支付方式</strong>
                <p>在线支付</p>
                <p>柜台付款</p>
            </div>
            <div class="itm">
                <strong>大麦网微信</strong>
                <img src="../img/img-templet/ewm.png" alt="">
            </div>
            <div class="itm">
                <strong>大麦网触屏版</strong>
                <img src="../img/img-templet/ewm.png" alt="">
            </div>
            <div class="itm">
                <strong>帮助中心</strong>
                <p>找回密码</p>
                <p>账户注册</p>
                <p>账户绑定</p>
                <p>SSL安全证书</p>
            </div>
            <div class="itm">
                <strong>特色服务</strong>
                <p>退换及缺货说明</p>
                <p>发票帮助</p>
                <p>订票服务条款</p>
            </div>
            <div class="itm">
                <strong>退票服务</strong>
                <p>退出订阅</p>
            </div>
        </div>
        <div class="line"></div>
        <div class="bottom">
            <ul>
                <li>公司介绍</li>
                <li>品牌识别</li>
                <li>企业荣誉</li>
                <li>隐私声明</li>
                <li>联系及合作</li>
                <li>招聘信息</li>
                <li>网站地图</li>
                <li>友情链接</li>
                <li class="last">公司大事记</li>
            </ul>
            <div class="bt-imgs">
                <img src="../img/img-templet/btom-1.jpg" alt="">
                <img src="../img/img-templet/btom-2.jpg" alt="">
                <img src="../img/img-templet/btom-3.jpg" alt="">
                <img src="../img/img-templet/btom-4.jpg" alt="">
                <img src="../img/img-templet/btom-5.jpg" alt="">
                <img src="../img/img-templet/btom-6.jpg" alt="">
            </div>
        </div>
    </footer>

    <script src="../js/pay.js"></script>
    <script src="../js/loginCheck.js"></script>
</body>

</html>